<template>
	<div class="Mcomponent">
		<!-- 头部 -->
		<div class="top">
			<div class="top-left">
				<ol>
					<li>
						<p>主题游</p>
						<span>个性独创</span>
					</li>
				</ol>
			</div>
			<div class="top-right">
				<div class="top-right-top" >
					<ol v-for="item in zhuti" :key="item.id">
						<li v-bind:style="[{backgroundImage:'url('+(item.url)+')'}]">
							<p>{{item.txt}}</p>
						</li>
					</ol>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="bottom">
			<div class="bottom-left">
				<ol>
					<li>
						<p>定制游</p>
					</li>
				</ol>
			</div>
			<div class="bottom-right">
				<ol v-for="item in dingzhi" :key="item.id">
					<li v-bind:style="[{backgroundImage:'url('+(item.url)+')'}]">
						<p>{{item.txt}}</p>
					</li>
				</ol>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Mcomponent',
		data(){
			return{
				zhuti:[
					{id:1,url:'img/purple_2.png',txt:'亲子游'},
					{id:2,url:'img/purple_3.png',txt:'摄影游'},
					{id:3,url:'img/purple_4.png',txt:'户外游'},
					{id:4,url:'img/purple_5.png',txt:'活动赛事'},
					{id:5,url:'img/purple_6.png',txt:'瑜伽行'},
					{id:6,url:'img/purple_7.png',txt:'野奢邦'},
				],
				dingzhi:[
					{id:1,url:'img/red_2.png',txt:'签证'},
					{id:2,url:'img/red_3.png',txt:'邮轮'},
					{id:3,url:'img/red_4.png',txt:'美宿度假'},
				]
				
			}
		}
	}
</script>

<style>
	.top{
		margin: 0 auto;
		width: 95%;
		overflow: hidden;
	}
	
	.top-left{
		width: 24%;
		height: 6rem;
		float: left;
		background-image: url(../../../../public/img/purple_1.png);
		background-size: 100% 100%;
		
	}
	.top-left p{
		margin-top: 1.8rem;
		text-align: center;
		font-weight: bolder;
	}
	.top-left span{
		display: block;
		margin: 0.5rem auto;
		text-align: center;
		width: 5rem;
		background-color: #ffd800;
		border-radius: 2rem;
	}
	.top-right{
		width: 76%;
		float: left;
	} 
	
	.top-right-top li{
		text-align: center;
		width: 33%;
		line-height: 3rem;
		float: left;
		background-size: 100% 100%;
	}
	
	
	.bottom{
		margin: 0 auto;
		width: 95%;
		overflow: hidden;
	}
	
	.bottom-left{
		width: 24%;
		height: 3rem;
		float: left;
		background-image: url(../../../../public/img/red_1.png);
		background-size: 100% 100%;
	}
	.bottom-left p{
		margin-top: 1rem;
		text-align: center;
		font-weight: bolder;
	}
	.bottom-right{
		width: 76%;
		float: left;
	}
	.bottom-right li{
		text-align: center;
		width: 33%;
		line-height: 3rem;
		float: left;
		background-size: 100% 100%;
	}
</style>
